import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    ScrollView,
    Dimensions,
} from 'react-native';
import Avatar from "../userAvatar/Avatar";
import {Button} from 'antd-mobile-rn';
//import Icon from "react-native-vector-icons/Ionicons"
import { List } from 'antd-mobile-rn';

const Item = List.Item;
const Brief = Item.Brief;

const {width, height} = Dimensions.get('window');
export default class UserContent extends Component {

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.nav1}>
                    <Avatar
                        size={78}
                        style={{margin: 6}}
                        //placeholder={require("../assets/guide/badge_icon.png")}
                        onPress={() => alert("click")}
                    />
                    <Text style={styles.nav1_text}>登录看更多</Text>
                    <Button activeStyle={false} style={styles.navl_button}><Text
                        style={styles.navl_button_text}>马上登录</Text></Button>
                </View>
                <View style={styles.nav2}>
                    <View style={styles.nav2_view}>
                    <Image style={styles.nav2_images} source ={require('../../assets/guide/user_information.png')} />
                    <Text style={styles.nav2_text}>消息中心</Text>
                    </View>
                    <View style={styles.nav2_view}>
                        <Image style={styles.nav2_1_images} source ={require('../../assets/guide/user_likes.png')} />
                        <Text style={styles.nav2_1_text}>我喜欢的</Text>
                    </View>
                </View>
                    <View
                        style={styles.nav3}
                    >
                    <List style={styles.nav3_list}>

                        <Item disabled extra="" arrow="horizontal" onClick={() => {}}>
                            <View style={styles.nav3_list_item_view}>
                                <Image  style={styles.nav3_list_item_images}  source ={require('../../assets/guide/user_recommend_app.png')} />
                                <Text> 推荐给谷居好友</Text>

                            </View>

                        </Item>

                        <Item disabled extra="" arrow="horizontal" onClick={() => {}}>
                            <View style={styles.nav3_list_item_view}>
                                <Image  style={styles.nav3_list_item_images}  source ={require('../../assets/guide/user_comment_app.png')} />
                                <Text> 给我好评</Text>

                            </View>

                        </Item>

                        <Item disabled extra="" arrow="horizontal" onClick={() => {}}>
                            <View style={styles.nav3_list_item_view}>
                                <Image  style={styles.nav3_list_item_images}  source ={require('../../assets/guide/user_cache.png')} />
                                <Text> 清理缓存</Text>

                            </View>
                        </Item>
                        <Item disabled extra="" arrow="horizontal" onClick={() => {}}>
                            <View style={styles.nav3_list_item_view}>
                                <Image  style={styles.nav3_list_item_images}  source ={require('../../assets/guide/user_about.png')} />
                                <Text> 关于谷居</Text>

                            </View>

                        </Item>
                    </List>
                    </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'stretch',
        backgroundColor: '#eaf1f3',
    },
    nav1: {
        flexDirection: 'row',
        paddingLeft: 20,
        marginTop: 5,
        backgroundColor:"#fff"
    }
    ,
    nav1_text: {
        marginTop: 35,
        fontSize: 16,
    },
    navl_button: {
        marginTop: 20,
        marginLeft: 70,
        backgroundColor: "#1890ff",
    },
    navl_button_text: {
        color: "#fff"
    },
    nav2: {
        flexDirection: 'row',
        marginTop: 5,
        backgroundColor:"#fff"
    }
    ,
    nav2_view: {
        flexDirection: 'column',
        width:width/2,
        justifyContent:"center",
        alignItems: 'center',

    },
    nav2_images: {
        width: 25,
        height: 20,
        marginTop:8
    }
    ,
    nav2_1_images: {
        width: 25,
        height: 20,
        marginTop:4
    }
    ,
    nav2_text: {
        fontSize: 16,
        marginLeft:7,
        marginTop:5,
        marginBottom:5
    },
    nav2_1_text: {
        fontSize: 16,
        marginLeft:7,
        marginTop:5,
        marginBottom:5
    },
    nav3: {
        marginTop: 5,
        width:width
    }
    ,
    nav3_list:{
    },
    nav3_list_item_images:{
        width:20,
        height:20
    },
    nav3_list_item_view:{
        flexDirection: 'row',
    }
});
